import { React } from "react";
import { Form, Col, Input, Row, Button, Space } from "antd";
import { MinusCircleOutlined } from "@ant-design/icons";

export default function methodGroup() {
  return (
    <Col span={24}>
      <Form.List name="methodGroups">
        {(fields, { add, remove }) => {
          return (
            <>
              <Row>
                <Col span={20}>
                  <div className="headlineClass">做法</div>
                </Col>
                <Col span={4}>
                  <Form.Item style={{ width: 200, marginTop: 20 }}>
                    <Button
                      style={{ height: 40 }}
                      type="dashed"
                      onClick={() => add()}
                    >
                      添加做法组
                    </Button>
                  </Form.Item>
                </Col>
              </Row>

              {fields.map((field) => (
                <Row key={field.key}>
                  <Col span={10}>
                    <Space>
                      <Row className="divfix">
                        <Col span={8} className="leftCommDiv">
                          做法组名
                        </Col>
                        <Col span={14}>
                          <Form.Item
                            name={[field.name, "name"]}
                            fieldKey={[field.fieldKey, "name"]}
                            rules={[
                              { required: true, message: "Missing 做法组名" },
                              { type: "string", max: 10, message: "长度超出" },
                            ]}
                          >
                            <Input />
                          </Form.Item>
                        </Col>
                        <Col span={2}>
                          <MinusCircleOutlined
                            style={{ fontSize: "30px", marginTop: 0 }}
                            onClick={() => remove(field.name)}
                          />
                        </Col>
                      </Row>
                    </Space>
                  </Col>
                  <Col span={14}>
                    <Form.List
                      {...field}
                      label="子"
                      name={[field.name, "options"]}
                      fieldKey={[field.fieldKey, "options"]}
                    >
                      {(testList, { add: addtest, remove: removetest }) => {
                        if (testList.length < 1) {
                          addtest();
                          testList = [
                            { fieldKey: 0, isListField: true, key: 0, name: 0 },
                          ];
                        }

                        return (
                          <>
                            {testList.map((testItem) => {
                              return (
                                <Row className="divfix" key={testItem.key}>
                                  <Col span={8} className="leftCommDiv">
                                    做法{testItem.key + 1}
                                  </Col>
                                  <Col span={14}>
                                    <Form.Item
                                      {...testItem}
                                      name={[testItem.name, "name"]}
                                      fieldKey={[testItem.fieldKey, "name"]}
                                      rules={[
                                        {
                                          required: true,
                                          message: "Missing 做法名",
                                        },
                                        {
                                          type: "string",
                                          max: 10,
                                          message: "长度超出",
                                        },
                                      ]}
                                    >
                                      <Input />
                                    </Form.Item>
                                  </Col>
                                  <Col span={2}>
                                    <MinusCircleOutlined
                                      style={{ fontSize: "30px", marginTop: 0 }}
                                      onClick={() => removetest(testItem.name)}
                                    />
                                  </Col>
                                </Row>
                              );
                            })}

                            <Form.Item>
                              <Button
                                type="dashed"
                                onClick={() => addtest()}
                                style={{ width: "90%", marginLeft: 20 }}
                              >
                                填加做法
                              </Button>
                            </Form.Item>
                          </>
                        );
                      }}
                    </Form.List>
                  </Col>
                </Row>
              ))}
            </>
          );
        }}
      </Form.List>
    </Col>
  );
}
